<template>
    <div class="recommend">
        <h4>推荐听书</h4>
        <ul>
            <li v-for="item in arr" :key="item.id">
                <a href="#">
                    <div class="pos">
                        <i>
                            <img src="../assets/img/播放_play.png">
                        </i>
                        <span>{{item.playCount | tenThousand}}万</span>
                    </div>
                    <img :src="item.picUrl" alt="">
                    <p>{{ item.name }}</p>
                </a>
            </li>
        </ul>
    </div>
</template>
<style lang="less">
@import '../assets/css/varible.less';

.recommend {
    padding: @pad;
    box-sizing: border-box;

    h4 {
        font-weight: bold;
        font-size: 18px;
        color: @bgColor;
        margin-top: 10px;
    }

    ul {

        width: 100%;
        display: grid;
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(3, 1fr);
        column-gap: 5px;

        li {
            margin-top: 5px;
            a {
                display: block;
                width: 100%;
                position: relative;

                img {
                    width: 100%;
                    border-radius: 5px;
                }
                p{
                    font-size: 16px;
                   font-weight: normal;
                    font-family: a;
                    margin-top: 5px;
                    // 多行文本溢出变省略号
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
                .pos{
                    position: absolute;
                    bottom:40px;
                    left: 0;
                    font-size: 12px;
                    color: white;
                }
                i{
                    img{
                        width: 15px;
                        height: 15px;
                        padding-left: 5px;
                    }
                }
                span{
                        margin-left: 5px;
                        
                    }
            }
        }
    }
}
</style>
<script>
import { personalized } from '../api/index'


export default{
    data(){
        return{
            arr:[

            ]
        }
    },
 // 过滤器
 filters: {
        tenThousand(value) {
            // 保留两位小数
            return ((value - 0) / 10000).toFixed(2);
        }
    },
    
    methods:{

        async getEditRecommend(){
            await personalized({limit:6})
            .then(
                content=>{
                    // console.log("--->",content);
                let {code ,result}= content;
                if (code === 200) {
                            // 映射新数组
                            let newArr = result.map((item, index) => {
                                // 定义对象 (整合数据)
                                let obj = {};
                                obj.alg = item.alg;
                                obj.id = item.id;
                                obj.name = item.name;
                                obj.picUrl = item.picUrl;
                                obj.playCount = item.playCount;
                                obj.type = item.type;
                                obj.index = index;
                                // 返回对象
                                return obj;
                            })
                            // 进行赋值（响应式）
                            this.arr = newArr;
                        }
                     
                }   
            )
            .catch(
                err=>{
                    console.log("请求失败，请刷新",err);
                }
            )
        }

    },

    created(){
        this.getEditRecommend();
    }
}
</script>